<template>
    <view class="app-menu" :style="{'padding': data.card == 1 && data.titleInCard == 1 ? data.card_margin + 'rpx 20rpx': ''}">
        <view :style="areaStyle" :class="data.card == 1 && data.titleInCard == 1 ? 'menu-shadow' : ''">
            <view class="menu-title" :style="titleStyle" v-if="data.show_title && !(data.card == 1 && data.titleInCard == 1)">{{data.title}}</view>
            <view :style="listStyle">
                <view class="menu-title" :style="titleStyle" v-if="data.show_title && data.card == 1 && data.titleInCard == 1">{{data.title}}</view>
                <view class="menu-list dir-left-wrap cross-center" :class="[data.card == 1 && data.titleInCard == 0 ? 'menu-shadow' : '', data.title_style == 1 ? 'list' : '']" :style="{'background-color': data.card == 1 && data.titleInCard == 0 ? data.card_bg : ''}">
                    <view v-for="(item,index) in data.menus" :key="index" class="menu-item" :style="{'margin-top': index == 0 && !data.show_title ? data.title_style == 1 ? '24rpx' : '14rpx' : ''}">
                    <!--  #ifdef H5 -->
                    <template v-if="item.open_type !== 'app'">
                    <!--  #endif -->
                        <app-jump-button form
                                         :url="item.link_url"
                                         :open_type="item.open_type"
                                         :item="item"
                                         :params="item.params"
                                         :arrangement="`${data.title_style === 1 ? 'row' : data.title_style === 2 ? 'column' : ''}`">
                            <view style="flex-shrink: 0;width: 100%;" :class="data.title_style == 2 ? 'dir-top-nowrap main-center cross-center' : 'dir-left-nowrap cross-center'">
                                <image class="icon_url" :src="item.icon_url" alt=""></image>
                                <view :style="{'color': data.text_color ? data.text_color : '#666666'}">{{item.name}}</view>
                                <image class="arrow" v-if="data.title_style == 1" :src="userCenterImg.arrow" alt=""></image>
                            </view>
                        </app-jump-button>
                    <!--  #ifdef H5 -->
                    </template>
                    <!--  #endif -->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    export default {
        name: "app-menu",
        props: {
            value: Object,
            bg: Object
        },
        data() {
            return {
                height: 136,
                data: {}
            }
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                userCenterImg: state => state.mallConfig.__wxapp_img.user_center,
                is_vip_card_user: function(state) {
                    return state.user.info && state.user.info.is_vip_card_user ? 1 : 0;
                }
            }),
            ...mapGetters({
                userInfo: 'user/info',
            }),
            areaStyle() {
                let style = `margin-top: ${this.data.margin}rpx;`;
                if(this.data.show_title && this.data.card == 1 && this.data.titleInCard == 1) {
                    style += `padding-top: 16rpx;`
                }
                if(this.data.card == 1 && this.data.titleInCard == 1) {
                    style += `background-color: ${this.data.card_bg};`
                }
                return style;
            },
            listStyle() {
                let style = ''
                if(this.data.card == 1 && this.data.titleInCard == 0) {
                    style += `padding: ${this.data.card_margin}rpx 20rpx;`
                }
                return style;
            },
            numberStyle() {
                let style = `color: ${this.data.number_color};font-size: ${this.data.number_size}rpx;`;
                if(this.data.mode != 1) {
                    style += `margin-bottom: 12rpx;`
                }
                return style;
            },
            titleStyle() {
                let style = `color: ${this.data.title_color};font-size: ${this.data.title_size}rpx;`;
                return style;
            }
        },
        created() {
            this.data = JSON.parse(JSON.stringify(this.value));
        },
        methods: {
        }
    }
</script>

<style scoped lang="scss">
    .app-menu {
        .menu-title {
            padding: 0 24rpx;
            font-weight: 600;
        }
        .menu-list {
            padding-bottom: 20rpx;
            .menu-item {
                width: 25%;
                flex-shrink: 0;
                margin-top: 28rpx;
                .icon_url {
                    flex-shrink: 0;
                    width: 50rpx;
                    height: 50rpx;
                }
                view {
                    font-size: 24rpx;
                    color: #999999;
                    margin-top: 10rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 90%;
                    text-align: center;
                }
                .arrow {
                    width: 16rpx;
                    height: 24rpx;
                }
            }
            &.list {
                padding: 0 24rpx 20rpx;
                .menu-item {
                    width: 100%;
                    margin-top: 36rpx;
                    view {
                        text-align: left;
                        width: 100%;
                        font-size: 32rpx;
                        color: #333333;
                        flex-grow: 1;
                        padding: 0 24rpx;
                        margin-top: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        image {
                            flex-shrink: 0;
                        }
                    }
                }
            }
        }
        .menu-shadow {
            border-radius: 16rpx;
            box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
        }
    }
</style>